<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>筋斗云效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .bar {
        position: relative;
        left: 0;
        margin-top: 10px;
      }
      .top-nav {
        position: absolute;
        top: 0;
        left: 0;
      }
      .top-nav ul li {
        float: left;
        padding: 0 5px;
      }
      .cloud {
        position: absolute;
        top: 0;
        left: 5px;
        width: 70px;
        height: 30px;
        background-color: greenyellow;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <div class="cloud"></div>
      <div class="top-nav">
        <ul>
          <li>首页新闻</li>
          <li>师资力量</li>
          <li>活动策划</li>
          <li>企业文化</li>
          <li>招聘信息</li>
        </ul>
      </div>
    </div>
    <script>
      function moveX(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          var step = (target - obj.offsetLeft) / 10;
          console.log(target, obj.offsetLeft, step);
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            callback && callback();
          }
          obj.style.left = obj.offsetLeft + step + "px";
        }, 15);
      }
      var ul = document.querySelector(".top-nav").children[0];
      var cloud = document.querySelector(".cloud");
      var num = 0;
      for (let i = 0; i < ul.children.length; i++) {
        ul.children[i].addEventListener("mouseenter", function () {
          moveX(cloud, i * ul.children[0].offsetWidth);
        });
        ul.children[i].addEventListener("mouseleave", function () {
          moveX(cloud, num * ul.children[0].offsetWidth);
        });
        ul.children[i].addEventListener("click", function () {
          num = i;
          moveX(cloud, num * ul.children[0].offsetWidth);
        });
      }
    </script>
  </body>
</html>
